package com.dubito.composewidgets.ui.carouselview

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.primarySurface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.lerp
import coil.compose.AsyncImage
import com.dubito.composewidgets.R
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.calculateCurrentOffsetForPage
import kotlin.math.absoluteValue

/**
 * author: LiLiang
 * createTime: 2022/10/5-14:56
 * remark:
 **/
@OptIn(ExperimentalPagerApi::class)
@Composable
fun CarouselView() {
    val gradient = Brush.verticalGradient(
        1000f to MaterialTheme.colors.primary,
        1000f to MaterialTheme.colors.surface
    )
    val gradient2 = Brush.verticalGradient(
        1000f to MaterialTheme.colors.secondary,
        1000f to MaterialTheme.colors.primarySurface
    )
    HorizontalPager(
        count = 10,
        contentPadding = PaddingValues(end = 65.dp),
        modifier = Modifier.fillMaxSize()
    ) { page ->
        Card(
            modifier = Modifier
                .graphicsLayer {
                    val pageOffset = calculateCurrentOffsetForPage(page = page).absoluteValue
                    lerp(
                        start = 0.85f.toDp(),
                        stop = 1f.toDp(),
                        fraction = 1f - pageOffset.coerceIn(0f, 1f)
                    ).also { scale ->
                        scaleX = scale.toPx()
                        scaleY = scale.toPx()
                    }
                    alpha = lerp(
                        start = 0.5f.toDp(),
                        stop = 1f.toDp(),
                        fraction = 1f - pageOffset.coerceIn(0f, 1f)
                    ).toPx()
                }
                .aspectRatio(0.72f),
            backgroundColor = Color.Transparent,
            shape = RoundedCornerShape(15.dp),
            elevation = 10.dp
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
                    .background(if (page % 2 == 0) gradient else gradient2)
            ) {
                ProductItem(page = page)
            }
        }
    }
}

@Composable
fun ProductItem(page: Int) {
    Column(
        modifier = Modifier
            .padding(end = 11.dp, start = 11.dp, top = 15.dp)
            .fillMaxWidth()
    ) {
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Text(
                text = "分类名称",
                style = MaterialTheme.typography.h2,
                color = MaterialTheme.colors.primary
            )
            AsyncImage(model = R.drawable.ic_launcher_foreground, contentDescription = "")
        }
        Text(
            text = if (page % 2 == 0) "红色字符" else "白色字符",
            style = MaterialTheme.typography.h3,
            color = Color.White
        )
        Spacer(modifier = Modifier.height(44.dp))
        AsyncImage(
            model = if (page % 2 == 0) R.drawable.ic_launcher_foreground else R.drawable.ic_launcher_background,
            contentDescription = "",
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Column() {
                repeat(3) {
                    Card(
                        elevation = 3.dp,
                        backgroundColor =
                        if (page % 2 == 0) {
                            when (it) {
                                0 -> {
                                    Color.Black
                                }
                                1 -> {
                                    Color.Red
                                }
                                else -> {
                                    Color.White
                                }
                            }
                        } else if (it == 0) {
                            Color.Blue
                        } else if (it == 1) {
                            Color.LightGray
                        } else {
                            Color.Yellow
                        },
                        shape = RoundedCornerShape(6.dp),
                        modifier = Modifier
                            .padding(top = 3.dp)
                            .size(20.dp, 20.dp)
                    ) {

                    }
                }
            }
            Card(
                shape = RoundedCornerShape(6.dp),
                elevation = 0.dp,
                modifier = Modifier
                    .defaultMinSize(minWidth = 73.dp, minHeight = 29.dp)
                    .align(Alignment.Bottom),
                backgroundColor = Color.Cyan
            ) {
                Box(contentAlignment = Alignment.Center) {
                    Text(text = "350", style = MaterialTheme.typography.h4, color = Color.White)
                }
            }
        }
    }
}